<template>
  <vue-draggable-resizable
    :w="w"
    :h="h"
    :x="x"
    :y="y"
    :z="z"
    :min-width="minWidth"
    :min-height="minHeight"
  >
    <div class="drag-res-con">
      <span class="close el-icon-close" @click="close" />
      <slot name="view" />
    </div>
  </vue-draggable-resizable>
</template>

<script>
export default {
  props: {
    //默认宽度
    w: {
      type: Number,
      default: 350,
    },
    //默认高度
    h: {
      type: Number,
      default: 200,
    },
    //默认水平偏移量
    x: {
      type: Number,
      default: 0,
    },
    //默认垂直偏移量
    y: {
      type: Number,
      default: 0,
    },
    //默认层级
    z: {
      type: Number,
      default: 1001,
    },
    //默认最小宽度
    minWidth: {
      type: Number,
      default: 350,
    },
    //默认最小高度
    minHeight: {
      type: Number,
      default: 350,
    },
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
.close{
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 20px;
    cursor: pointer;
    z-index:100000
}
/deep/ .handle{
    display: block !important;
    width: 12px;
    height: 12px;
    background-color: transparent;
}
/deep/ .handle-tm,
/deep/ .handle-ml,
/deep/ .handle-mr,
/deep/ .handle-bm{
    display:none !important;
}
/deep/ .handle-tl{
    top: 2px;
    left: 2px;
    border-top:6px solid #1af2ff;
    border-left:6px solid #1af2ff;
    border-right:6px solid transparent;
    border-bottom:6px solid transparent;
}
/deep/ .handle-bl{
    bottom: 2px;
    left: 2px;
    border-top:6px solid transparent;
    border-right:6px solid transparent; 
    border-left:6px solid #1af2ff;
    border-bottom:6px solid #1af2ff;
}
/deep/ .handle-tr{
    top: 2px;
    right: 2px;
    border-top:6px solid #1af2ff;
    border-right:6px solid #1af2ff;
    border-left:6px solid transparent;
    border-bottom:6px solid transparent;
}
/deep/ .handle-br{
    bottom: 2px;
    right: 2px;
    border-top:6px solid transparent;
    border-right:6px solid #1af2ff;
    border-left:6px solid transparent;
    border-bottom:6px solid #1af2ff;
}
.vdr{
    background-color: rgba(0,62,105,0.6);
    border: 1px solid #1af2ff;
    padding: 20px 10px 20px 30px;
    display: flex;
    .drag-res-con{
        flex:1;
        overflow-x: hidden;
        padding-right:20px;
    }
}
::-webkit-scrollbar{
    width:6px;
    background-color: #5c8098;
}
::-webkit-scrollbar-thumb{
    border-radius:10px;
    background-color: #03fffd;
}
</style>